<template>
  <div v-loading="!specSelectVisible">
    <IndependenceForm v-if="specSelectVisible" ref="form" :submit-fun="submitFun">
      <page-region title="基本信息">
        <SingleForm ref="baseForm" v-model="baseData" v-bind="baseFormInfo" />
      </page-region>
      <page-region title="属性规格">
        <SingleForm v-if="specSelectVisible" ref="specInfoForm" v-model="specInfoData" v-bind="specInfo" />
      </page-region>
      <template #specSelect="{ cellRenderFrame, cellRenderData }">
        <SpecSelect ref="specSelect" v-model="cellRenderData[cellRenderFrame.key]" :productVo />
      </template>
      <template #attrSelect="{ cellRenderFrame, cellRenderData }">
        <GoodsAttrValue ref="attSelect" v-model="cellRenderData[cellRenderFrame.key]" :productVo />
      </template>
      <template #productImage="{ cellRenderFrame, cellRenderData }">
        <ProductImageUpload ref="productImage" v-model="cellRenderData[cellRenderFrame.key]" />
      </template>
    </IndependenceForm>
  </div>
</template>
<script setup lang="ts">
import {
  MIndependenceForm as IndependenceForm,
  MPageRegion as PageRegion,
  MSingleForm as SingleForm,
  type SingleFormProps
} from "page-com";
import { shallowReactive, useTemplateRef, ref, provide, getCurrentInstance, shallowRef } from "vue";
import { successMsg } from "@/utils/message";
import SpecSelect from "./SpecSelect.vue";
import ProductImageUpload from "./ProductImageUpload.vue";
import GoodsAttrValue from "./GoodsAttrValue.vue";
import { updateGoods, getGoodsDetail } from "@/api/product/goodsApi";
import { uploadFun } from "@/utils/utils";
import { useRoute } from "vue-router";
import { getServiceSelect } from "@/api/product/serviceApi";
import { getProductDetail } from "@/api/product/productApi";
const form = useTemplateRef("form");
async function submitFun(data) {
  let res = await updateGoods(data);
  if (res.code == RESPONSE_CODE.SUCCESS) {
    successMsg("修改成功");
    form.value.goBack();
  }
}
const productVo = shallowRef<ShopProductDetailVo>();
const baseData = ref({});
const baseFormInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "input",
      key: "goodsName",
      label: "商品名称",
      validations: {
        required: true
      }
    },
    {
      frameType: "input",
      key: "goodsDesc",
      label: "商品描述"
    },
    {
      frameType: "input",
      key: "price",
      label: "售价",
      validations: {
        required: true,
        float2: true
      }
    },
    {
      frameType: "multiSelect",
      key: "serviceIds",
      label: "商品服务",
      options: getServiceSelect().then(v => v.data)
    },
    {
      label: "封面图",
      frameType: "singleUpload",
      key: "coverImage",
      uploadUrl: "/user/uploadFile",
      uploadFun: uploadFun,
      validations: {
        required: true
      }
    },
    {
      frameType: "slot",
      slot: "productImage",
      key: "detailImages",
      label: "详情图",
      value: [],
      validations: {
        required: true
      }
    }
  ]
});
const specInfo = shallowReactive<Partial<SingleFormProps>>({
  items: [
    {
      frameType: "slot",
      slot: "attrSelect",
      key: "attrValues",
      label: "属性配置",
      value: []
    },
    {
      frameType: "slot",
      slot: "specSelect",
      key: "specInfos",
      label: "规格配置",
      value: [],
      validations: {
        required: true
      }
    }
  ]
});
const route = useRoute();
const specInfoData = ref({ specInfos: [], attrValues: [] });
const specSelectVisible = ref(false);
const specSelect = useTemplateRef("specSelect");
getGoodsDetail(Number(route.query.id)).then(async res => {
  if (res.code == RESPONSE_CODE.SUCCESS) {
    specInfoData.value.specInfos = res.data.specInfos;
    specInfoData.value.attrValues = res.data.attrValues;
    baseData.value = { ...res.data };
    let productRes = await getProductDetail(res.data.productId);
    if (productRes.code === RESPONSE_CODE.SUCCESS) {
      productVo.value = productRes.data;
      specSelectVisible.value = true;
    }
  }
});
</script>
